const path = require("path");
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry:[
        './src/index.js'
    ],
    mode:'development',    //development/production,默认为production, 为webpack指定一些默认的配置
    module:{
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                options: { presets: ["@babel/preset-react", "@babel/env"] }
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader","sass-loader"]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 这里可以指定一个 publicPath
                            name:'[name].[ext]'
                            // 默认使用 webpackOptions.output中的publicPath
                        },
                    },
                    'css-loader',
                ],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                        limit: 8192,
                        name:'[name].[ext]'
                      }
                    }
                ]
            },
            {
                test: /\.html$/i,
                // use:  [ "html-loader"],
                loader: 'html-loader',
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192
                    }
                  }
                ]
            }
        ]
    },
    resolve:{
        extensions:["*", ".js", ".jsx"]
    },
  output:{
        path:path.resolve(__dirname,"dist/"),
        publicPath:"/",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: path.join(__dirname, "/"),
        port: 18089,
        publicPath: "http://localhost:18089/",
        hot: true,
        historyApiFallback: true
      //  hotOnly: true

    },
    plugins: [new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({ // 打包输出HTML
        title: 'Hello World app',
        minify: { // 压缩HTML文件
            removeComments: true, // 移除HTML中的注释
            collapseWhitespace: true, // 删除空白符与换行符
            minifyCSS: false// 压缩内联css
        },
        filename: 'index.html',
        template: './src/index.ejs'
    }),    new MiniCssExtractPlugin({
        // 类似 webpackOptions.output里面的配置 可以忽略
        filename: '[name].css',
        chunkFilename: '[id].css',
    }),],

    performance: {
        hints: "warning", // 枚举
        maxAssetSize: 30000000, // 整数类型（以字节为单位）
        maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
        assetFilter: function(assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

        }
    }
}